/* db-navigation */

.db-navi-search .filter-box .filter-head {padding: 2rem 0 2.3rem 1rem; border-bottom: 2px solid #999;}

.db-navi-hd {display: flex; justify-content: space-between; position: relative;}
.db-navi-hd.border-b {border-bottom: 2px solid #999; margin-bottom: 3rem;}

.navi-title-bar {padding: 0 0 1.5rem 2.8rem; color: #333; font-size: 2.2rem; position: relative; margin: 0 0 1rem 0; flex: 1;}
.navi-title-bar strong {font-weight: 700; font-size: inherit; line-height: inherit;}
.navi-title-bar:after {content: ''; position: absolute; left: 2px; top: 2px; width: .5rem; height: 2rem; background: #333;}

.service-navi {display: flex;}

.navi-list {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7rem 3.5rem;}
.db-navi-search .navi-list {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7rem 2.5rem;}
.navi-list li {display: flex; background-color: #fafafa;}
.navi-list .list {width: 100%; border: 1px solid #e2e2e2; box-sizing: border-box;}
.navi-list .list .image {overflow: hidden; width: 100%; height: 17.5rem; border-bottom: 1px solid #e2e2e2; position: relative;}
.navi-list .list .image img {width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;}
.navi-list .list .image .btn-wrap {display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; background-color: rgba(0, 0, 0, .6); position: absolute; left: 0; top: 0; opacity: 0; gap: 1.4rem; transition: .5s;}
.navi-list .list .image .btn-wrap button {display: flex; align-items: center; justify-content: center; width: 7.2rem; height: 7.2rem; border-radius: 50%; background-color: #040404;}/* 251125 */
.navi-list .list .image .btn-wrap button span {background-position: center; background-repeat: no-repeat; width: 100%; height: 100%; font-size: 1.2rem; filter: invert(100%); opacity: .7; padding: 4.6rem 0 0; letter-spacing: -0.05em; font-weight:800;}/* 251125 */
.navi-list .list .image .btn-wrap button:hover span {opacity: 1; transition: .3s;}
.navi-list .list .image .btn-wrap button.view-more span {background-image: url(../images/ico_b_more.svg); background-position: center 1.8rem;}
.navi-list .list .image .btn-wrap button.site-link span {background-image: url(../images/ico_b_outlink_s.svg); background-position: center 1.8rem;}
.navi-list .list:hover .image .btn-wrap {opacity: 1;}
.navi-list .list .con {display: block; padding: 2.3rem 1.7rem 2.5rem;}
.navi-list .list .con-hd {display: flex; justify-content: space-between; padding-bottom: 1.7rem; margin-bottom: 1.5rem; border-bottom: 1px solid #ddd;}
.navi-list .list .con-hd .title {margin-right: 1rem;}
.navi-list .list .con-hd .title a {font-size: 2rem; line-height: 1.2; color: #222; font-weight: 600; margin-bottom: .7rem;}
.navi-list.card .list .con-hd .title a {min-height: 5rem;}
.navi-list .list .con-hd .title span {display: block; font-size: 1.2rem; color: #418e8e;}
.navi-list .list .con-body .det-info {font-size: 1.4rem; color: #222; line-height: 1.4; margin-bottom: 1.5rem; display: none;}
.navi-list .list .con-body .cat {display: inline;}
.navi-list .list .con-body .cat:not(:last-child):after {content: ''; display: inline-block; position: relative; top: 2px; margin: 0 .5rem; width: 1px; height: 1.2rem; background-color: #b4b4b4;}
.navi-list .list .con-body a {display: inline; line-height: 1.6; font-size: 1.4rem; color: #666; word-break: keep-all;}
.navi-list .list .con-body a:not(:last-child):after {content: ','; margin-right:.2rem;}
.navi-list .list:hover {box-shadow: .4rem .4rem 2rem rgba(0,0,0,.3); transition: .5s;}

.navi-list.detail {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem 8rem;}
.db-navi-search .navi-list.detail {gap: 3.5rem 5rem;}
.navi-list.detail li {background-color: #fff; padding-bottom:3.5rem; border-bottom: 1px solid #ddd;}
.navi-list.detail .list {width:100%; border: none; display: flex; align-items: stretch;}
.navi-list.detail .list .image {width:28.4rem; border: 1px solid #d6d6d6; display: flex;}
.db-navi-search .navi-list.detail .list .image {width:20rem; height: 16rem;}
.navi-list.detail .list .con {flex: 1; padding: 1.1rem 0 1.1rem 3.3rem; box-sizing: border-box; display: block;}
.db-navi-search .navi-list.detail .list .con {padding: 1.1rem 0 1.1rem 2rem;}
.navi-list.detail .list .con-hd .title {margin-right: 1rem; display: flex; align-items: baseline;}
.navi-list.detail .list .con-hd .title a {margin-bottom: 0; font-size: 2.2rem; font-weight: 700;}
.navi-list.detail .list .con-hd .title span {display: inline-block; position: relative; white-space: nowrap; font-size: 1.4rem;}
.navi-list.detail .list .con-hd .title span:before {content: ''; display: inline-block;  position: relative; top: 2px; margin: 0 1rem; width: 1px; height: 1.4rem; background-color: #b4b4b4;}
.navi-list.detail .list .con-body .det-info {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;}
.db-navi-search .navi-list.detail .list .con-body .det-info {-webkit-line-clamp: 2;}
.navi-list.detail .list .con-body .cat:not(:last-child):after {top: 2px;}
.navi-list.detail .list .con-body a {line-height: 1.4;}

.navi-list.simple {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2rem 0; width: 100%;}
.navi-list.simple li {background-color: #fff; padding-bottom:2rem; border-bottom: 1px solid #ddd;}
.navi-list.simple .list {width:100%; border: none; display: flex;}
.navi-list.simple .list .image {width:12rem; height: auto; border: 1px solid #d6d6d6;}
.navi-list.simple .list .image .btn-wrap {gap: 1rem;}
.navi-list.simple .list .image .btn-wrap button {width: 4rem; height: 4rem; margin-top: -3rem;}/*251125*/
.navi-list.simple .list .image .btn-wrap button span {width: 4rem; height: 4rem; background-size: 1.3rem; word-break: keep-all;}/*251125*/
.navi-list.simple .list .con {width:calc(100% - 12rem); padding: 1.1rem 0 1.1rem 3.3rem; box-sizing: border-box;}
.navi-list.simple .list .con-hd {padding-bottom: 1rem; margin-bottom: 1rem; justify-content: flex-start;}
.navi-list.simple .list .con-hd .title {margin-right: 1rem; display: flex; align-items: baseline;}
.navi-list.simple .list .con-hd .title a {margin-bottom: 0;}
.navi-list.simple .list .con-hd .title span {display: inline-block; position: relative; white-space: nowrap; font-size: 1.4rem;}
.navi-list.simple .list .con-hd .title span:before {content: ''; display: inline-block;  position: relative; top: 2px; margin: 0 1rem; width: 1px; height: 1.4rem; background-color: #b4b4b4;}
.navi-list.simple .list .con-body .det-info {display: none;}
.navi-list.simple .list .con-body .cat:not(:last-child):after {top: 2px;}
.navi-list.simple .list .con-body a {line-height: 1.4;}

.btn-basic-light {display:flex; flex-wrap:wrap; align-items:center; padding: 0 1.6rem; color:#333; border:1px solid #d1d1d1; background-color: #fff; height:3.2rem; font-size:1.4rem; font-weight:400; border-radius:.4rem; white-space: nowrap; min-width: 15rem;}
.btn-basic-light::before {content: ''; display: inline-block; width: 1.6rem; height: 1.6rem; margin-right: 1rem; filter: invert(41%) sepia(54%) saturate(725%) hue-rotate(180deg) brightness(87%) contrast(102%);}
.btn-basic-light.card::before {background: url(../images/ico_b_list_thumb.svg) no-repeat center / 1.6rem auto;}
.btn-basic-light.detail::before {background: url(../images/ico_b_list_detail.svg) no-repeat center / 1.6rem auto;}
.btn-basic-light.simple::before {background: url(../images/ico_b_list_simple.svg) no-repeat center / 1.6rem auto;}
.btn-basic-light.active, .btn-basic-light.active:hover {border:1px solid #3366cc; background-color: #3366cc; color: #fff; transition: .5s;}
.btn-basic-light.active::before, .btn-basic-light.active:hover:before {filter: invert(100%)}
.btn-basic-light.page {font-size: 0; min-width: auto;}
.btn-basic-light.page::before {margin-right: 0; filter: none;}
.btn-basic-light.page.next::before {background: url(../images/ico_b_arrow.svg) no-repeat center / .9rem auto; transform: rotate(180deg); margin-right: .3rem;}
.btn-basic-light.page.before::before {background: url(../images/ico_b_arrow.svg) no-repeat center / .9rem auto; margin-left: .3rem;}
.btn-basic-light:hover {background-color: #e9eef6; transition: .5s;}

.views {font-size: 1.2rem; color: #6f6f6f; white-space: nowrap; position: relative; top: .4rem;}
.views::before {content: ''; display: inline-block; position: relative; top: .2rem; margin-right: .8rem; width: 1.9rem; height: 1.2rem; background: url(../images/ico_b_eye.svg) no-repeat center; filter: invert(66%) sepia(10%) saturate(1151%) hue-rotate(131deg) brightness(94%) contrast(87%);}
.navi-list.detail .views {margin-right: 1rem; top: 1rem;}
.navi-list.simple .views {padding-left: 1rem; top: .7rem;}
.navi-list.simple .views::after {content: ''; position: absolute; left: 0; top: 0; display: block; width: 1px; height: 1.4rem; background-color: #b4b4b4; margin-right: 1rem;}

.navi-detail-info {display: flex; justify-content: space-between; background: #fdfcfc; border: 1px solid #e4e4e4;}
.navi-detail-info:not(:first-child) {margin-left: 2.4rem;}
.navi-detail-info.con {flex: 1; padding: 8rem 7.4rem; display: flex; justify-content: center;}
.navi-detail-info.add {display: none; width: 38rem; padding: 4.5rem 7.4rem; box-sizing: border-box;}
.navi-detail-info .con-wrap {max-width: 120rem;}
.navi-detail-info .con-basic {display: flex; align-items: stretch; border: 1px solid #b5b5b5;}
.navi-detail-info .con-basic .image {width: 48rem; border: 1px solid #e8e8e8; border-width: 0 1px 0 0; overflow: hidden; display: flex;}
.navi-detail-info .con-basic .image img {width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;}
.navi-detail-info .con-basic .basic-info {flex: 1; padding: 5rem;}
.navi-detail-info .con-basic .basic-info .organ {font-size: 1.9rem; font-weight: 700; line-height: 1.2; color: #47475a;}
.navi-detail-info .con-basic .basic-info .db a {font-size: 3.6rem; font-weight: 700; margin-top: 1.5rem; line-height: 1.2; color: #47475a;}
.navi-detail-info .con-basic .basic-info .db a::after {content: ''; display: inline-block; margin-left: 1rem; width: 2.8rem; height: 2.8rem; background: url(../images/ico_b_outlink_s.svg) no-repeat center; filter: invert(41%) sepia(54%) saturate(725%) hue-rotate(180deg) brightness(87%) contrast(102%);}
.navi-detail-info .con-basic .basic-info .eng {font-size: 1.6rem; font-weight: 500; margin-top: 1.3rem; line-height: 1.2; color: #333;}
.navi-detail-info .con-basic .basic-info dl {display: flex; flex-wrap: wrap; align-items: flex-start; gap: .9rem 0; margin-top: 4.5rem;}
.navi-detail-info .con-basic .basic-info dl dt {display: flex; align-items: center; justify-content: center; width: 9.5rem; margin-right: 2.5rem; height: 2.6rem; border-radius: 1.3rem; background-color: #2a2f44; color: #fff;}
.navi-detail-info .con-basic .basic-info dl dd {width: calc(100% - 12rem); font-size: 1.7rem; color: #111; margin-top: .5rem; word-break: break-all;}
.navi-detail-info .meta-info dl {display: flex; flex-wrap: wrap; margin-top: 6rem; border-top: 1px solid #dcdbdb;}
.navi-detail-info .meta-info dt {width: 12rem; border-bottom: 1px solid #dcdbdb; padding: 1.8rem 0; font-size: 1.4rem; color: #666; line-height: 1.2;}
.navi-detail-info .meta-info dd {width: calc(100% - 12rem); border-bottom: 1px solid #dcdbdb; padding: 1.8rem 0; font-size: 1.7rem; color: #111; line-height: 1.2;}
.navi-detail-info .meta-info dd a:not(:last-child):after {content: ','; margin-right: .5rem;}
.navi-detail-info .detail-info {margin-top: 6rem; font-size: 1.7rem; line-height: 2;}

.db-navi-search .search-result .result-list ul {display:flex; flex-wrap:wrap; align-items:flex-start; min-height:4.5rem; margin: -.5rem 1rem .5rem 1rem ;}

.icon-right {display: flex; align-items: flex-start; gap: .5rem; position: relative; top: -.7rem;}

.dbSwiper, .dbLecentSwiper {max-width: 1600px; overflow: hidden; margin-bottom: 8rem;}
.dbSwiper .navi-list, .dbLecentSwiper .navi-list {gap: 0;}
.navi-list .list .con-body .cat-wrap {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; height: auto;}
.dbSwiper .navi-list .list .con-body .cat-wrap, .dbSwiper .navi-list .list .con-body .cat-wrap, .dbLecentSwiper .navi-list .list .con-body .cat-wrap, .dbSwiper .navi-list .list .con-body .cat-wrap {height: 7rem;}

.sub-button .sns-box {position:relative;}
.sub-button .sns-box > a {margin-left: .5rem;}
.sub-button .sns-box ul {display:none; z-index:11; position:absolute; top:4.8rem; left:50%; transform:translateX(-50%); box-shadow:1rem 1rem 1rem rgba(0,0,0,0.08); border:1px solid #d2d2d2; background-color:#fff; border-radius:.4rem; padding:1.3rem 1.2rem;}
.sub-button .sns-box ul:after {content:''; position:absolute; top:-.6rem; left:50%; margin-left:-.9rem; transform:translateX(-50%); width:1.1rem; height:1.1rem; background:#fff; border:1px solid #d2d2d2; border-radius:2px; border-width:1px 1px 0 0; transform:rotate(-45deg);}
.sub-button .sns-box ul.active {display:block; height:auto;}
.sub-button .sns-box ul>li {display: table-cell;}
.sub-button .sns-box ul>li>a {width:5rem; height:5rem;}
.sub-button .sns-box li a {position:relative; font-size:0; border: none;}
.sub-button .sns-box li a::before{content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-repeat:no-repeat; background-position:center; transition:all 0.3s;}
.sub-button .sns-box a.kakaotalk::before{background-image: url('../images/icon_sns_kakaotalk.svg');}
.sub-button .sns-box a.facebook::before{background-image:url('../images/icon_sns_facebook.svg')}
.sub-button .sns-box a.twitter::before{background-image: url('../images/icon_sns_twitter.svg');}
.sub-button .sns-box li a:hover {background-color:#f2f2f2;  transition:all 0.3s;}
.sub-button .sns-box li a:hover::before {opacity:1;}

@media (max-width:1700px){
	.navi-list {gap: 7rem 2rem;}
    .navi-list.detail {gap: 3.5rem 4rem;}
    .db-navi-search .navi-list.detail {gap: 3.5rem 4rem;}
}

@media (max-width:1560px){
	.navi-list {gap: 7rem 2rem;}
    .navi-list.detail {gap: 3.5rem 4rem;}
    .db-navi-search .navi-list.detail {gap: 3.5rem 4rem;}

    .db-navi-search .navi-list.detail .list .con-hd .title {flex-wrap: wrap;}
    .db-navi-search .navi-list.detail .list .con-hd .title a {width: 100%;}
    .db-navi-search .navi-list.detail .list .con-hd .title span {width: 100%; margin-top: .4rem;}
    .db-navi-search .navi-list.detail .list .con-hd .title span:before {display: none;}
}

@media (max-width:1400px){
	.navi-list {grid-template-columns: repeat(4, minmax(0, 1fr));gap: 5rem 2rem;}
    .db-navi-search .navi-list.card {grid-template-columns: repeat(3, minmax(0, 1fr));}

    .navi-list.detail .list .image {width:25rem;}
    .db-navi-search .navi-list.detail .list .image {width:20rem; height: 16rem;}
    .navi-list.detail .list .con {padding: 1rem 0 1rem 2rem;}
    .db-navi-search .navi-list.detail .list .con {padding: 0 0 0 2rem;}
    .navi-list.detail .list .con-hd .title a {font-size: 2.2rem;}
    .navi-list.detail .list .con-hd .title span {font-size: 1.4rem;}
    .navi-list.detail .list .con-hd .title span:before {top: 2px; margin: 0 1rem; width: 1px; height: 1.4rem;}
    .navi-list.detail .list .con-body .det-info {-webkit-line-clamp: 2;}    
    .navi-list.detail .list .con-body .cat-wrap {-webkit-line-clamp: 2;}

    .db-navi-search .navi-list.detail .list .image {width:13rem; height: 10rem;}   
    .db-navi-search .btn-basic-light.detail {display: none;}
}

@media (max-width:1024px){
	.navi-list, .db-navi-search .navi-list.card {grid-template-columns: repeat(3, minmax(0, 1fr));gap: 4rem 1rem;}
    .navi-list.detail {gap: 3.5rem 2rem;}

    .navi-list.detail .list .image {width:17rem;}
    .db-navi-search .navi-list.detail .list .image {width:17rem; height: 14rem;}    
    .navi-list.detail .list .con, .db-navi-search .navi-list.detail .list .con {padding: 0 0 0 2rem;}
    .navi-list .list .con-hd {padding-bottom: 1.3rem; margin-bottom: 1.2rem;}
    .navi-list .list .con-body .det-info {margin-bottom: 1rem;}

    .navi-list.detail .list .con-hd .title {flex-wrap: wrap;}
    .navi-list.detail .list .con-hd .title a {width: 100%;}
    .navi-list.detail .list .con-hd .title span {width: 100%; margin-top: .4rem;}
    .navi-list.detail .list .con-hd .title span:before {display: none;}
    .navi-list.detail .views {display: none;}

    .navi-detail-info.con {padding: 5rem 4.4rem;}
    .navi-detail-info .con-basic .image {width: 32rem;}
    .navi-detail-info .con-basic .basic-info {padding: 4rem;}
    .navi-detail-info .con-basic .basic-info .organ {font-size: 1.9rem;}
    .navi-detail-info .con-basic .basic-info .db a {font-size: 2.8rem; margin-top: 1.2rem;}
    .navi-detail-info .con-basic .basic-info .eng {font-size: 1.6rem; margin-top: 1.1rem;}
    .navi-detail-info .con-basic .basic-info dl {gap: .4rem 0; margin-top: 3.5rem;}
    .navi-detail-info .con-basic .basic-info dl dt {width: 9.5rem; margin-right: 2rem; height: 2.6rem; font-size: 1.3rem;}
    .navi-detail-info .con-basic .basic-info dl dd {width: calc(100% - 12rem); font-size: 1.6rem; margin-top: .3rem;}
}

@media (max-width:767px){
    .db-navi-hd {display: flex; flex-wrap: wrap;}
    .navi-title-bar {width: 100%; flex: auto;}
    .db-navi-hd .sub-button {margin-bottom: 2rem;}

	.navi-list, .db-navi-search .navi-list.card {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 3rem 1rem;}
    .navi-list.detail, .db-navi-search .navi-list.detail {grid-template-columns: repeat(1, minmax(0, 1fr));}

    .navi-list .list .image {height: 13.5rem;}
    .navi-list .list .con {display: block; padding: 1rem;}
    .navi-list .list .con-hd {padding-bottom: 1rem; margin-bottom: 0; border-bottom: none;}
    .navi-list .list .con-hd .title {margin-right: .5erm;}
    .navi-list .list .con-hd .title a {font-size: 1.8rem; margin-bottom: .7rem;}
    
    .navi-list.simple .list .image {width:10rem;}
    .navi-list.simple .list .image .btn-wrap {gap: 0;}
    .navi-list.simple .list .image .btn-wrap button {width: 4rem; height: 4rem; margin-top: 0;}/*251125*/
    .navi-list.simple .list .image .btn-wrap button span {width: 4rem; height: 4rem; background-size: 1.3rem; font-size: 0;}/*251125*/
    .navi-list.simple .list .con {width:calc(100% - 10rem); padding: 0 0 0 2rem;}

    .navi-list.detail .list .image {width:13rem; height: 10rem;}
    .db-navi-search .navi-list.detail .list .image {width:13rem; height: 10rem;}   

    .navi-detail-info.con {padding: 0; border: none;}
    .navi-detail-info .con-basic {display: flex; flex-wrap: wrap; border: none;}
    .navi-detail-info .con-basic .image {width: 100%; max-height: 30rem; border-width: 1px;}
    .navi-detail-info .con-basic .basic-info {padding: 5rem 0 0 2rem;}
    .navi-detail-info .con-basic .basic-info .organ {font-size: 1.8rem;}
    .navi-detail-info .con-basic .basic-info .db a {font-size: 2.6rem;}
    .navi-detail-info .con-basic .basic-info .eng {font-size: 1.6rem;}
    .navi-detail-info .con-basic .basic-info dl {gap: .4rem 0; margin-top: 2.5rem;}
    .navi-detail-info .con-basic .basic-info dl dt {width: 9.5rem; margin-right: 2rem; height: 2.6rem; font-size: 1.3rem;}
    .navi-detail-info .con-basic .basic-info dl dd {width: calc(100% - 12rem); font-size: 1.6rem; margin-top: .3rem;}
    
    .navi-detail-info .meta-info dt {width: 9rem;}
    .navi-detail-info .meta-info dd {width: calc(100% - 9rem);}

    .btn-basic-light {font-size: 0;min-width: 0;padding: 0 .1rem 0 1.1rem;}
    .btn-basic-light.detail {display: none;}

    .views {display: none;}
}